<template>
  <div class="container">
    <input type="file" id="file_id" @change="updateAvatar" accept="image/*" style="display: none" />
    <div class="header flex_row between">
      <div class="avatar_name_id flex_row">
        <img :src="joinUrlImg(INFO.avatar)" alt="" />
        <div class="info">
          <div class="name">{{ INFO.name }}</div>
          <div class="id dis_flex">
            <img src="@/assets/images/my/ID.png" alt="" />
            {{ INFO.id }}
          </div>
        </div>
      </div>
      <!-- @click="$router.push('/messageList')" -->
      <div class="message_update_avatar flex_column flex_align_end">
        <div class="message" @click="$router.push('/messageList')">
          <img src="@/assets/images/my/message.png" alt="" />
          <!-- <div class="red_dot"></div> -->
        </div>
        <div class="text flex_row flex_align_center" @click="updateAvatarOperate">
          <div class="text_content">更换头像</div>
          <img src="@/assets/images/common/right.png" alt="" />
        </div>
      </div>
    </div>
    <div class="statistics flex_row around">
      <div class="self flex_column flex_align_center">
        <div class="count">{{ info.self_num }}</div>
        <div class="text">自我测评</div>
      </div>
      <div class="task flex_column flex_align_center">
        <div class="count">{{ info.task_num }}</div>
        <div class="text">任务测评</div>
      </div>
      <div class="appoint flex_column flex_align_center">
        <div class="count">{{ info.offline_num }}</div>
        <div class="text">预约次数</div>
      </div>
      <div class="consult flex_column flex_align_center">
        <div class="count">{{ info.online_num }}</div>
        <div class="text">咨询次数</div>
      </div>
    </div>

    <div class="list">
      <div @click="$router.push('/personInfo')" class="item flex_row flex_align_center father_relative">
        <img src="@/assets/images/my/data.png" alt="" />
        <div class="text">个人资料</div>
        <img class="right vertical_center" src="@/assets/images/common/right.png" alt="" />
      </div>
      <div @click="$toast.fail('功能暂未开放！')" class="item flex_row flex_align_center father_relative" v-if="false">
        <img src="@/assets/images/my/login_type.png" alt="" />
        <div class="text">登录方式</div>
        <img class="right vertical_center" src="@/assets/images/common/right.png" alt="" />
      </div>
      <div @click="$router.push('/updatePwd')" class="item flex_row flex_align_center father_relative">
        <img src="@/assets/images/my/update_password.png" alt="" />
        <div class="text">修改密码</div>
        <img class="right vertical_center" src="@/assets/images/common/right.png" alt="" />
      </div>
    </div>

    <div class="exit" @click="exit">
      <div class="item flex_row flex_align_center father_relative">
        <img src="@/assets/images/my/exit_icon.png" alt="" />
        <div class="text">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryMyHomeFrequency, updateUserInfo } from "@/api/my/index";
import { queryUserInfo } from "@/api/consultation/online.js";
import { uploadImg } from "@/api/common";
import { getBase64 } from "@/utils/url";
import { mapMutations, mapState } from "vuex";
import { joinUrlImg } from "@/utils/setUrlImg";

export default {
  data() {
    return {
      info: {},
    };
  },
  computed: {
    ...mapState(["INFO", "TIMER"]),
  },
  created() {
    this.getHomeFrequency();
  },
  methods: {
    joinUrlImg,
    ...mapMutations(["SET_INFO"]),

    async getHomeFrequency() {
      let res = await queryMyHomeFrequency();
      if (res.code == 200) {
        this.info = res.data;
      }
    },
    exit() {
      this.$popup({
        title: "提示",
        message: `<div>确定要退出登录吗？</div>`,
        confirmOperate: async () => {
          sessionStorage.removeItem("token");
          this.$router.push("/");
        },
      });
    },
    // 更换头像
    updateAvatarOperate() {
      document.getElementById("file_id").click();
    },
    // 手机
    async updateAvatar(event) {
      const base64 = await getBase64(event.target.files[0]);
      let res = await uploadImg({ file: base64 });
      if (res.code === 200) {
        this.toUpdate(res.data);
      }
    },
    async toUpdate(avatar) {
      let par = {
        id: this.INFO.id,
        avatar,
      };
      let res = await updateUserInfo(par);
      if (res.code == 200) {
        this.getUserInfo();
        this.$toast.success("更换头像成功");
      }
    },
    //用户消息
    async getUserInfo() {
      let res = await queryUserInfo({ id: this.INFO.id });
      if (res.code == 200) {
        this.SET_INFO({ ...this.INFO, avatar: res.data.avatar });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
